<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="ele-pro-form-builder-code-line-numbers">
    <div v-for="n in codeLines" :key="n">{{ n }}</div>
  </div>
  <pre class="ele-pro-form-builder-code-pre" v-html="codeHtml"></pre>
</template>

<script setup>
import { ref, watch } from "vue";
import hljs from "highlight.js";
import "highlight.js/styles/github-dark.css";
import xml from "highlight.js/lib/languages/xml";

hljs.registerLanguage("vue", xml);

const props = defineProps({
  /** 代码 */
  code: String,
});

/** 高亮后代码 */
const codeHtml = ref("");

/** 代码行数 */
const codeLines = ref(1);

watch(
  () => props.code,
  (code) => {
    const result = hljs.highlight(code ?? "", { language: "vue" }).value;
    codeHtml.value = result;
    codeLines.value = result.split("\n").length;
  },
  { immediate: true },
);
</script>
